<template>
  <div class="win">
    <i-toast id="toast" />
    <!-- 顶部轮播图 -->
    <div class="banner">
      <div class="search_box">
        <div class="search_row" @click="hr_goodsClassBottm">
          <img src="/static/img/search_icon.png" class="search_icon" alt />
          <p>搜索优质商品</p>
        </div>
        <div class="mail_box" @click="hr_information">
          <img v-if="bjurl" class="mail" :src="bjurl+'index_mail_logo.png'" />
          <p v-if="indexTopData.status==2" class="mail_number"></p>
        </div>
      </div>
      <swiper
        :class="indexTopData.content==null?'bottom_null':''"
        class="swiper"
        :duration="500"
        :indicator-dots="true"
        indicator-active-color="#fff"
        :autoplay="true"
        :circular="true"
      >
        <block v-for="(item,index) in banner.indexBanner" :key="index">
          <swiper-item>
            <div class="swiper_item">
              <img class="swiper_item_show" :src="item.src" mode="widthFix" />
            </div>
          </swiper-item>
        </block>
      </swiper>
      <!-- <swiper
        class="swiper"
        :duration="500"
        indicator-active-color="#fff"
        :autoplay="true"
        :circular="true"
        @change="swiperChange"
      >
        <block v-for="(item,index) in banner.indexBanner" :key="index">
          <swiper-item>
            <div class="swiper_item">
              <img :src="item.src" mode="widthFix" />
            </div>
          </swiper-item>
        </block>
      </swiper>-->
      <p class="headlines" v-if="indexTopData.content!=null">
        汽美头条:
        <i-notice-bar
          class="linet"
          backgroundcolor="transparent"
          color="#4d4d4d"
          speed="1000"
          :loop="loop"
        >{{indexTopData.content}}</i-notice-bar>
      </p>
    </div>
    <!-- 免费申请，成为合作门店banner图 -->
    <div class="team_box" @click="hr_applyTeam" v-if="member_type==2">
      <img v-if="banner.teamBanner" :src="banner.teamBanner[0].src" mode="widthFix" />
    </div>
    <!-- 导航栏10个图标 -->
    <div class="navigation_box">
      <div
        class="item"
        @click="hr_goodsClass(index,item.class_id)"
        v-for="(item, index) in indexTopData.pro_class"
        :key="index"
      >
        <img :src="item.image" />
        <p>{{item.name}}</p>
      </div>
    </div>
    <!-- 后台控制通知信息广播栏 -->
    <div class="notice_new_box">
      <img src="/static/img/horn_logo.png" />
      <i-notice-bar
        v-if="loopp"
        class="notice_new"
        backgroundcolor="transparent"
        color="#4d4d4d"
        speed="1000"
        :loop="loopp"
      >{{indexTopData.news}}</i-notice-bar>
      <i-notice-bar
        v-else
        class="notice_new"
        backgroundcolor="transparent"
        color="#4d4d4d"
        speed="1000"
        :loop="loopp"
      >{{indexTopData.news}}</i-notice-bar>
    </div>
    <!-- 广告banner图 -->
    <div class="advert_box" @click="hr_advert">
      <img :src="indexTopData.advert_image" mode="widthFix" />
    </div>
    <!-- 商品栏 -->
    <div class="commodity_box" v-if="addressDataShow">
      <!-- 新品推荐专区 -->
      <div class="index_item_box">
        <img class="item_top_banner" v-if="bjurl" :src="bjurl+'index_goods_title1.png'" />
        <div class="newRecommend_box">
          <div
            v-if="t<4"
            class="item"
            @click="hr_goodsDetail(item)"
            v-for="(item,t) in indexCommodity.newRecommend"
            :key="t"
          >
            <img :src="item.image" />
            <div class="item_bottom_box">
              <P class="name ellipsis2">{{item.name}}</P>
              <div class="row_box">
                <div class="tips_box">
                  <p
                    v-if="l<2"
                    :class="ite=='包邮'?'blue':'green'"
                    v-for="(ite, l) in item.label"
                    :key="l"
                  >{{ite}}</p>
                </div>
                <p class="cost_money">￥{{item.price}}</p>
              </div>
              <div class="money_box">
                <p class="money">
                  ￥
                  <span>{{item.sale_price}}</span>
                </p>
                <p class="sales">销量：{{item.sale_num}}</p>
              </div>
            </div>
          </div>
        </div>
        <p class="see-bottom" @click="hr_priceAreaOne">点击查看更多</p>
      </div>
      <!-- 特价活动专区 -->
      <div class="index_item_box">
        <img class="item_top_banner" v-if="bjurl" :src="bjurl+'index_goods_title2.png'" />
        <scroll-view class="discount_box" enable-flex="true" scroll-x>
          <div
            v-if="t<6"
            class="item"
            @click="hr_goodsDetail(item)"
            v-for="(item,t) in indexCommodity.discount"
            :key="t"
          >
            <img :src="item.image" />
            <div class="item_bottom_box">
              <P class="name ellipsis2">{{item.name}}</P>
              <div class="row_box">
                <div class="tips_box">
                  <p
                    v-if="l<2"
                    :class="ite=='包邮'?'blue':'green'"
                    v-for="(ite, l) in item.label"
                    :key="l"
                  >{{ite}}</p>
                </div>
                <p class="cost_money">￥{{item.price}}</p>
              </div>
              <div class="money_box">
                <p class="money">
                  ￥
                  <span>{{item.sale_price}}</span>
                </p>
                <p class="sales">销量：{{item.sale_num}}</p>
              </div>
            </div>
          </div>
          <p class="right_more" @click="hr_priceAreaTwo">点击查看更多</p>
        </scroll-view>
      </div>
      <!-- 为你精品推荐 -->
      <div class="index_item_box">
        <img class="item_top_banner" v-if="bjurl" :src="bjurl+'index_goods_title3.png'" />
        <div class="newRecommend_box">
          <div
            v-if="t<10"
            class="item"
            @click="hr_goodsDetail(item)"
            v-for="(item,t) in indexCommodity.choiceRecommend"
            :key="t"
          >
            <img :src="item.image" />
            <div class="item_bottom_box">
              <P class="name ellipsis2">{{item.name}}</P>
              <div class="row_box">
                <div class="tips_box">
                  <p
                    v-if="l<2"
                    :class="ite=='包邮'?'blue':'green'"
                    v-for="(ite, l) in item.label"
                    :key="l"
                  >{{ite}}</p>
                </div>
                <p class="cost_money">￥{{item.price}}</p>
              </div>
              <div class="money_box">
                <p class="money">
                  ￥
                  <span>{{item.sale_price}}</span>
                </p>
                <p class="sales">销量：{{item.sale_num}}</p>
              </div>
            </div>
          </div>
        </div>
        <p class="see-bottom" @click="hr_goodsClassBottm">点击查看更多</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      member_type: "",
      marqueePace: 1, //滚动速度
      marqueeDistance: 0, //初始滚动距离
      marquee_margin: 30,
      interval: 20, // 时间间隔
      currentSwiperIndex: 0, //swiper当前索引
      addressDataShow: true, //该区域暂未开通本服务判断    true是开启了 false是没开启
      bjurl: "",
      banner: {},
      indexTopData: {}, //主页上半部分数据
      indexCommodity: {
        newRecommend: [], //新品推荐专区
        discount: [], //特价活动专区
        choiceRecommend: [] //为你精品推荐
      }, //主页下半部分商品
      evaluatePopup: false, //估价弹窗
      loop: false,
      loopp: false
    };
  },
  methods: {
    initData(callback) {
      let member_id = wx.getStorageSync("member_id");
      if (member_id == "") {
        this.$bus.$on("getMemberInfo", () => {
          callback();
        });
        this.$forceUpdate();
      } else {
        callback();
        this.$forceUpdate();
      }
    },
    // 请求接口经营项目
    getManage() {
      this.$ajax("/home/GetInfo/manageItem", "post", {})
        .then(res => {
          if (res.status) {
            wx.navigateTo({
              url: "../applyTeam/main"
            });
          } else {
            this.$toast({
              content: res.msg
            });
          }
        })
        .catch(err => {});
    },
    //请求接口首页信息(稳健头条-满减规则,通知消息,商品分类,消息右上角状态)
    getIndexTopData() {
      this.$ajax("/home/home/index", "post", {})
        .then(res => {
          if (res.status) {
            this.indexTopData = res.data;
            if (this.indexTopData.content.length > 18) {
              this.loop = true;
            } else this.loop = false;
            if (this.indexTopData.news.length > 20) {
              this.loopp = true;
            } else this.loopp = false;

            this.$forceUpdate();
          } else {
          }
        })
        .catch(err => {});
    },
    // 一起请求3个banner图
    getBannerList() {
      this.getBanner("socardMiddle", "teamBanner");
      this.getBanner("socarDfirst", "indexBanner");
    },
    // 请求banner图
    getBanner(mark, bannerRow) {
      this.$ajax("/home/home/banner", "post", {
        mark: mark
      })
        .then(res => {
          if (res.status) {
            this.banner[bannerRow] = res.data;
            this.$forceUpdate();
          } else {
          }
        })
        .catch(err => {});
    },
    // 一起请求3个区域的商品
    getGoodsList() {
      this.getGoods("1", "newRecommend");
      this.getGoods("2", "discount");
      this.getGoods("3", "choiceRecommend");
    },
    //请求首页商品信息(正常商品,特价商品,推荐商品)
    getGoods(mark, goodsMode) {
      this.$ajax("/home/home/getHomePro", "post", {
        mark: mark,
        member_type: 2
      })
        .then(res => {
          if (res.status) {
            this.indexCommodity[goodsMode] = res.data;
          } else {
          }
        })
        .catch(err => {});
    },
    // 跳转到申请门店合作
    hr_applyTeam() {
      wx.requestSubscribeMessage({
        tmplIds: ["bJdT0gvarpbc3TQHxZZUqfv_2vgg3xIo6c2OEE1vioc"],
        success: re => {
          this.getManage();
        },
        fail: err => {
          this.getManage();
        }
      });
      // this.getManage();
    },
    // 跳转到消息
    hr_information() {
      wx.navigateTo({
        url: "../information/main"
      });
    },
    // 跳转到广告
    hr_advert() {
      wx.navigateTo({
        url: "../advert/main"
      });
    },
    // 跳转到商品分类
    hr_goodsClass(index, class_id) {
      wx.navigateTo({
        url:
          "../goodsClass/main?navActive=" +
          (index + 1) +
          "&class_id=" +
          class_id
      });
    },
    // 跳转到商品分类全部商品
    hr_goodsClassBottm() {
      wx.navigateTo({
        url: "../goodsClass/main?navActive=" + 0
      });
    },
    // 跳转到商品详细
    hr_goodsDetail(item) {
      wx.navigateTo({
        url: "../goodsDetail/main?pro_id=" + item.pro_id + "&type=" + 1
      });
    },
    //跳转到新品推荐专区
    hr_priceAreaOne() {
      wx.navigateTo({
        url: "../priceArea/main?type=" + 1
      });
    },
    //跳转到特价活动专区
    hr_priceAreaTwo() {
      wx.navigateTo({
        url: "../priceArea/main?type=" + 2
      });
    },
    swiperChange(e) {
      this.currentSwiperIndex = e.mp.detail.current;
    },
    // 控制弹窗
    onEvaluatePopup() {
      this.evaluatePopup = true;
    },
    // 控制弹窗
    offEvaluatePopup() {
      this.evaluatePopup = false;
    }
  },
  onShow() {
    Object.assign(this.$data, this.$options.data());
    this.initData(() => {
      this.bjurl = this.$bjurl;
      this.member_type = wx.getStorageSync("member_type");
      this.getIndexTopData();
      this.getBannerList();
      this.getGoodsList();
      this.$forceUpdate();
    });
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    // this.initData(() => {
    //   this.member_type = wx.getStorageSync("member_type");
    //   this.getIndexTopData();
    //   this.getBannerList();
    //   this.getGoodsList();
    //   this.bjurl = this.$bjurl;
    //   this.$forceUpdate();
    // });
  }
};
</script>

<style lang="scss" scoped>
.win {
  padding-bottom: 60rpx;
  font-weight: 500;
  .banner {
    background-color: #ffffff;
    position: relative;
    box-shadow: -1rpx 7rpx 9rpx 0rpx rgba(169, 169, 169, 0.14);
    .bottom_null {
      padding-bottom: 15rpx;
    }
    .swiper {
      height: 290rpx;
      .swiper_item {
        .swiper_item_show {
          margin: 0 auto;
          width: 710rpx;
          height: 300rpx;
          overflow: hidden;
          border-radius: 20rpx;
        }
      }
    }
    // .swiper {
    //   height: 294rpx;
    //   .swiper_item {
    //     img {
    //       border-radius: 15rpx;
    //       margin: 0 auto;
    //       width: 710rpx;
    //       height: 294rpx;
    //     }
    //   }
    // }
    .headlines {
      height: 80rpx;
      width: 750rpx;
      box-sizing: border-box;
      padding: 0 36rpx 0 62rpx;
      color: $green;
      display: flex;
      align-items: center;
      .linet {
        flex: 1;
        color: #4d4d4d;
      }
    }
    .search_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 30rpx;
      .search_row {
        width: 597rpx;
        height: 55rpx;
        display: flex;
        position: relative;
        box-shadow: 3rpx 4rpx 6rpx 0rpx rgba(0, 0, 0, 0.1),
          0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.1);
        border-radius: 28rpx;
        .search_icon {
          position: absolute;
          left: 30rpx;
          top: 15rpx;
          width: 25rpx;
          height: 25rpx;
        }
        p {
          color: #adadad;
          position: absolute;
          top: 16rpx;
          left: 86rpx;
          font-size: 22rpx;
        }
      }
      .mail_box {
        position: relative;
        .mail {
          width: 47rpx;
          height: 39rpx;
        }
        .mail_number {
          position: absolute;
          right: -4rpx;
          top: -4rpx;
          background-color: #ff1818;
          width: 13rpx;
          height: 13rpx;
          border-radius: 50%;
        }
      }
    }
  }
  .team_box {
    padding-top: 20rpx;
    img {
      width: 750rpx;
    }
  }
  .navigation_box {
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #ffffff;
    padding-bottom: 30rpx;
    .item {
      margin-top: 30rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #333333;
      font-size: 22rpx;
      width: 20%;
      img {
        width: 66rpx;
        height: 66rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
      }
    }
  }
  .notice_new_box {
    margin-top: 20rpx;
    width: 750rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    height: 60rpx;
    img {
      width: 40rpx;
      height: 36rpx;
    }
    .notice_new {
      flex: 1;
      font-size: 24rpx;
      color: #4d4d4d;
    }
  }
  .advert_box {
    margin-top: 20rpx;
    img {
      width: 750rpx;
    }
  }

  .commodity_box {
    margin-top: 20rpx;
    .index_item_box {
      margin-bottom: 20rpx;
      background-color: #ffffff;
      padding-bottom: 30rpx;
      box-shadow: -1rpx 7rpx 9rpx 0rpx rgba(169, 169, 169, 0.14);
      .item_top_banner {
        margin: 0 auto;
        width: 695rpx;
        height: 106rpx;
      }
      .newRecommend_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 30rpx;
        .item {
          width: 333rpx;
          display: flex;
          flex-direction: column;
          margin-top: 20rpx;
          background-color: #ffffff;
          border-radius: 20rpx;
          box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(0, 0, 0, 0.11);
          img {
            width: 333rpx;
            height: 331rpx; //固定高度后期修改
            border-radius: 20rpx 20rpx 0 0;
          }
          .item_bottom_box {
            min-height: 160rpx;
            box-sizing: border-box;
            padding: 10rpx 12rpx 15rpx 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name {
              width: 300rpx;
              color: #4d4d4d;
              font-size: 26rpx;
              line-height: 1.1;
              font-weight: bold;
            }
            .row_box {
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              .tips_box {
                display: flex;
                font-size: 18rpx;
                p {
                  padding: 6rpx 10rpx 7rpx;
                  border-radius: 15rpx;
                  margin-right: 10rpx;
                }
                .blue {
                  color: #6da9ff;
                  background-color: #deebff;
                  border-radius: 15rpx;
                  margin-right: 10rpx;
                }
                .green {
                  color: #ffffff;
                  background-color: $green;
                }
              }
              .cost_money {
                font-size: 20rpx;
                color: #b3b3b3;
                text-decoration: line-through;
              }
            }
            .money_box {
              display: flex;
              align-items: flex-end;
              justify-content: space-between;
              .money {
                color: $red;
                line-height: 0.9;
                font-size: 26rpx;
                span {
                  font-size: 36rpx;
                }
              }
              .sales {
                font-size: 22rpx;
                color: #7c7c7c;
              }
            }
          }
        }
      }
      .discount_box {
        margin-top: 20rpx;
        width: 750rpx;
        display: flex;
        padding: 0 30rpx;
        box-sizing: border-box;
        height: 390rpx;
        align-items: center;
        .item {
          width: 235rpx;
          display: flex;
          flex-direction: column;
          margin-top: 20rpx;
          background-color: #ffffff;
          border-radius: 20rpx;
          margin-right: 20rpx;
          box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.11);
          img {
            width: 235rpx;
            height: 233rpx; //固定高度后期修改
            border-radius: 20rpx 20rpx 0 0;
            overflow: hidden;
          }
          .item_bottom_box {
            height: 128rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 6rpx 8rpx 15rpx 14rpx;
            .name {
              width: 200rpx;
              color: #4d4d4d;
              font-size: 19rpx;
              line-height: 1.1;
              font-weight: bold;
            }
            .row_box {
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              .tips_box {
                display: flex;
                font-size: 12rpx;
                p {
                  padding: 5rpx 10rpx 7rpx;
                  border-radius: 15rpx;
                  margin-right: 10rpx;
                }
                .blue {
                  color: #6da9ff;
                  background-color: #deebff;
                  border-radius: 15rpx;
                  margin-right: 10rpx;
                }
                .green {
                  color: #ffffff;
                  background-color: $green;
                }
              }
              .cost_money {
                font-size: 14rpx;
                color: #b3b3b3;
                text-decoration: line-through;
              }
            }
            .money_box {
              display: flex;
              align-items: flex-end;
              justify-content: space-between;
              .money {
                color: $red;
                line-height: 0.9;
                font-size: 17rpx;
                span {
                  font-size: 25rpx;
                }
              }
              .sales {
                font-size: 15rpx;
                color: #7c7c7c;
              }
            }
          }
        }
        .right_more {
          padding: 0 5rpx 0 15rpx;
          font-size: 25rpx;
          line-height: 1.5;
          color: #999999;
        }
      }
    }
  }
  .popup {
    .evaluate_box {
      width: 600rpx;
      padding-bottom: 30rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      position: relative;
      .top_bj {
        width: 600rpx;
        height: 220rpx;
        border-radius: 10rpx;
      }
      .bottom_img {
        margin: 30rpx auto 0;
        width: 540rpx;
        height: 140rpx;
        border-radius: 10rpx;
      }
      .close_img {
        width: 65rpx;
        height: 65rpx;
        position: absolute;
        top: -150rpx;
        right: 0rpx;
      }
    }
  }
}
</style>
